<template>
  <div class="project-review">
    <div class="page-header">
      <h1>项目审核管理</h1>
    </div>

    <el-card>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="待审核项目" name="申报中">
          <ProjectReviewTable 
            :projects="pendingProjects" 
            :loading="loading"
            @review="handleReview"
            @refresh="fetchProjects"
          />
        </el-tab-pane>
        
        <el-tab-pane label="结题审核" name="结题审核中">
          <ProjectReviewTable 
            :projects="finishReviewProjects" 
            :loading="loading"
            @review="handleReview"
            @refresh="fetchProjects"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog v-model="showReviewDialog" title="项目审核" width="600px">
      <div v-if="reviewProject">
        <el-descriptions :column="2" border style="margin-bottom: 20px;">
          <el-descriptions-item label="项目名称">{{ reviewProject.name }}</el-descriptions-item>
          <el-descriptions-item label="项目类型">{{ reviewProject.projectType }}</el-descriptions-item>
          <el-descriptions-item label="项目级别">{{ reviewProject.level }}</el-descriptions-item>
          <el-descriptions-item label="项目状态">{{ reviewProject.status }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <el-form :model="reviewForm" label-width="100px">
        <el-form-item label="审核结果" required>
          <el-radio-group v-model="reviewForm.status">
            <el-radio label="已通过">通过</el-radio>
            <el-radio label="已驳回">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="审核意见" required>
          <el-input
              v-model="reviewForm.opinion"
              type="textarea"
              :rows="4"
              placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showReviewDialog = false">取消</el-button>
        <el-button type="primary" :loading="reviewLoading" @click="submitReview">
          提交审核
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/utils/request'

// 响应式数据
const loading = ref(false)
const reviewLoading = ref(false)
const activeTab = ref('申报中')
const showReviewDialog = ref(false)
const pendingProjects = ref([])
const finishReviewProjects = ref([])
const reviewProject = ref(null)

const reviewForm = reactive({
  status: '',
  opinion: ''
})

// 获取待审核项目
const fetchProjects = async () => {
  try {
    loading.value = true
    
    if (activeTab.value === '申报中') {
      const response = await http.get('/api/projects/by-status/申报中')
      pendingProjects.value = Array.isArray(response) ? response : []
    } else if (activeTab.value === '结题审核中') {
      const response = await http.get('/api/projects/by-status/结题审核中')
      finishReviewProjects.value = Array.isArray(response) ? response : []
    }
    
  } catch (error) {
    console.error('获取项目失败:', error)
    ElMessage.error('获取项目失败')
  } finally {
    loading.value = false
  }
}

const handleTabChange = () => {
  fetchProjects()
}

const handleReview = (project) => {
  reviewProject.value = project
  reviewForm.status = ''
  reviewForm.opinion = ''
  showReviewDialog.value = true
}

const submitReview = async () => {
  try {
    if (!reviewForm.status || !reviewForm.opinion) {
      ElMessage.warning('请填写完整的审核信息')
      return
    }
    
    reviewLoading.value = true
    
    await http.post(`/api/projects/${reviewProject.value.id}/review`, {
      status: reviewForm.status,
      opinion: reviewForm.opinion
    })
    
    ElMessage.success('审核完成')
    showReviewDialog.value = false
    await fetchProjects()
    
  } catch (error) {
    console.error('审核失败:', error)
    ElMessage.error('审核失败')
  } finally {
    reviewLoading.value = false
  }
}

onMounted(() => {
  fetchProjects()
})
</script>

<script>
// 项目审核表格组件
import { defineComponent } from 'vue'

const ProjectReviewTable = defineComponent({
  name: 'ProjectReviewTable',
  props: {
    projects: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['review', 'refresh'],
  template: `
    <el-table :data="projects" v-loading="loading" stripe>
      <el-table-column prop="name" label="项目名称" min-width="200" show-overflow-tooltip />
      <el-table-column prop="projectType" label="项目类型" width="120" />
      <el-table-column prop="level" label="项目级别" width="100" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="提交时间" width="160">
        <template #default="{ row }">
          {{ formatDateTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="$emit('review', row)">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  `,
  methods: {
    getStatusType(status) {
      const types = {
        '申报中': 'warning',
        '结题审核中': 'info'
      }
      return types[status] || 'info'
    },
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '-'
      try {
        return new Date(dateTimeStr).toLocaleString('zh-CN')
      } catch {
        return '-'
      }
    }
  }
})

export default {
  components: {
    ProjectReviewTable
  }
}
</script>

<style scoped>
.project-review {
  max-width: 1400px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}
</style>
